<template>
<div class="score-edit">
    <el-input
    type="textarea"
    autosize
    placeholder="请输入题目内容"
    v-model="title"
    @change="changeTitle">
  </el-input>
  <el-checkbox v-model="checked" class="isness" @change="changeNess">必答</el-checkbox>
  <div class="score">
    <span>最大分值:</span>
    <el-tooltip effect="light" content="请输入1-20的整数" :show-after="500"  placement="top">
      <el-input-number v-model="max" @change="changeGrade" size="mini" :min="1" :max="20" :step="1" style="width: 60%; margin-left:20px" step-strictly label="最大分数" ></el-input-number>
    </el-tooltip>
  </div>

  <el-checkbox class="isness" @change="this.isStarAviSet = !this.isStarAviSet">设定本题作答名额</el-checkbox>
  <div>
    <el-input-number
        :disabled="!this.isStarAviSet"
        v-model="this.starAviNum"
        size="mini"
        @change="this.starAviNumChange"
        :min="1"
        label="描述文字"
        style="margin-top: 10px; margin-bottom: 10px">
    </el-input-number>
  </div>



  <el-button class="finish-edit" @click="finish">完成编辑</el-button>
</div>
  
</template>

<script>
export default{
  name:'StarEdit',
  data(){
   return {
     isStarAviSet: false,
     starAviNum: 1,
   }
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: true,
    },
    max: {
      type: Number,
      default: 5,
    }
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },

    finish() {
      this.$emit('finish')
    },

    changeGrade() {
      this.$emit('changeGrade', this.max)
    },

    starAviNumChange() {
      this.$emit('staravinumchange', this.starAviNum)
    }
  }
}
</script>

<style scoped src='assets/css/editcss/starEdit.css'>
  /* @import url('../../css/starEdit.css'); */
</style>
